<template>
  <div>
    <div class="search">
     <div>
      <el-input
      placeholder="Search"
      v-model="searchInput"
      class="input-with-select"
      >
       <i slot="suffix" class="el-input__icon el-icon-search"></i>
        <el-select v-model="value" slot="prepend" >
          <el-option label="Filter" value="1"></el-option>
          <el-option label="Date" value="2"></el-option>
        </el-select>
      </el-input>
      
      </div>
      <el-button class="recordBtn" @click="recordDialogVisible = true">+ Add Record</el-button>
    </div>
    <!-- 表格 -->
    <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column
        prop="id"
        label="id"
        sortable
         width="60"
      >
      </el-table-column>
      <el-table-column
        prop="Account"
        label="Account"
        sortable>
      </el-table-column>
      <el-table-column
        prop="Venue"
        label="Venue"
        sortable>
      </el-table-column>
      <el-table-column
        prop="EventName"
        label="Event Name"
        width = "130"
        sortable>
      </el-table-column>
      <el-table-column
        prop="EventSpace"
        label="Event Space"
        width = "140"
        sortable>
      </el-table-column>
      <el-table-column
        prop="EventNature"
        label="Event Nature"
        width = "140"
        sortable>
      </el-table-column>  
      <el-table-column
        prop="SetUp"
        label="Set Up"
        width = "100"
        sortable>
      </el-table-column>     
      <el-table-column
        prop="Capacity"
        label="Capacity"
        sortable>
      </el-table-column>  
      <el-table-column
        prop="Contact"
        label="Contact"
        sortable>
      </el-table-column>   
      <el-table-column
        prop="Actions"
        label="Actions"
        width="80">
        <div class="editContainer">
       <i class="el-icon-edit" @click="showMessage"></i>
       <i class="el-icon-delete" @click="editMessage"></i>
      </div>
      </el-table-column> 
    </el-table>
    <!-- 表格 -->
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="50">
      </el-pagination>
    </div>

    <!-- 弹窗表单 -->
    <el-dialog
      :visible.sync="recordDialogVisible"
      width="80%"
      :before-close="handleClose">
      <!-- 弹窗内部表单 -->
      <el-form 
      :inline="true" 
      :model="formInline" 
      class="demo-form-inline"
      :label-position="labelPosition">
        <!-- 第一行 -->
        <div class="dialog-title">
          <h2>Edit Contanct Profile</h2>
          <p>Last update at 14 September 2020 16:00</p>
        </div>
        <el-row>
          <el-alert class="tip"
            title="Basic information"
            :closable="false">
          </el-alert>
          <el-col :span="8">
              <el-form-item
            label="Venue"
            :rules="[
                { required: true, message: '不能为空'}
            ]">
              <el-input  placeholder="Cluster"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
            label="Account"
            :rules="[
                { required: true, message: '不能为空'}
            ]">
              <el-input  placeholder="BNI"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
            label="Retired"
            >
              <el-input  placeholder="No"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <!-- 第一行 -->
          <!-- 第二行 -->
         <el-row>
          <el-alert class="tip"
            title="Personal information"
            :closable="false">
          </el-alert>
          <el-col :span="8">
              <el-form-item
            label="Salutation"
            :rules="[
                { required: true, message: '不能为空'}
            ]">
              <el-input  placeholder="Mrs."></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
            label="First Name"
            :rules="[
                { required: true, message: '不能为空'}
            ]">
              <el-input  placeholder="Gary"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
            label="Last Name"
            >
              <el-input  placeholder="Chan"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item
            label="Department">
              <el-input  placeholder="Please enter a department"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
            label="Title">
              <el-input  placeholder="Please enter a title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
            label="Role Description"
            :rules="[
                { required: true, message: '不能为空'}
            ]"
            >
              <el-input  placeholder="Descision Maker"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item
            label="Birthday"
            :rules="[
                { required: true, message: '不能为空'}
            ]">
              <el-input  placeholder="Please select birthday"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
            label="Interest & Hobbies"
            :rules="[
                { required: true, message: '不能为空'}
            ]">
              <el-input  placeholder="Please select interest"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
            label="Additional Info">
              <el-col :span="24">
                <el-input  placeholder=""></el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <!-- 第三行 -->
        <el-row>
          <el-alert class="tip"
            title="Contact Details"
            :closable="false">
          </el-alert>
          <el-col :span="8">
              <el-form-item
            label="DirectLine"
            :rules="[
                { required: true, message: '不能为空'}
            ]">
              <el-input  placeholder="Please enter a phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
            label="Mobile Code"
            :rules="[
                { required: true, message: '不能为空'}
            ]">
              <el-input  placeholder="Please enter mobile code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
            label="Email"
            >
              <el-input  placeholder="Please enter email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <div class="btnGrop">
          <el-button type="" round @click="recordDialogVisible = false">取消</el-button>
          <el-button type="primary" round>确定</el-button>
        </div>

      </el-form>
      
      <!-- 弹窗内部表单 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
      return {
        value: '',
        tableData: [{
          id: '1',
          Account: 'AdmanGo',
          Venue: 'HKGTA',
          EventName: 'Harbour Run',
          EventSpace: 'Salon3',
          EventNature: 'Interl / Staff gathering',
          SetUp:'Banquet- Round Table',
          Capacity: '31-50',
          Contact:'Ivy Huang'
        }, {
          id: '2',
          Account: 'Alliance Bemstein',
          Venue: 'NDP',
          EventName: 'Harbour Run',
          EventSpace: 'Farm House',
          EventNature: 'Client / Engagement',
          SetUp:'Standing',
          Capacity: '51-80',
          Contact:'Felix Chan'
        }, {
          id: '3',
          Account: 'Alliance Bemstein',
          Venue: 'HKGTA',
          EventName: 'Strategy Meeting',
          EventSpace: 'Meeting Suite',
          EventNature: 'Interl / Staff gathering',
          SetUp:'Banquet- Long Table',
          Capacity: 'below 12',
          Contact:'Justina Kam'
        }],
        recordDialogVisible: false,
        formInline: {
          user: '',
          region: ''
        },
        labelPosition: 'top',
        searchInput: ''
      }
    },
    methods: {
      formatter(row, column) {
       
      },
      handleClose() {
        this.recordDialogVisible = false
      },
      showMessage() {
        alert('查看')
      },
      editMessage() {
        alert('编辑')
      }
    }
  }
</script>

<style lang="less" scoped>
::v-deep .el-select .el-input {
    width: 130px;
  }

::v-deep .input-with-select .el-input-group__prepend {
    background-color: transparent;
  }
  .search {
    background: #355196;
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 10px 10px 10px 10px;

    .recordBtn {
      background: #f9e9b8;
      color: #000;
    }

  }
::v-deep .el-input__inner{ 
    background-color: transparent;
    color: #eee;

  }
::v-deep .el-table{
  padding: 10px;
  background-color:transparent;

}
.editContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  i {
    padding: 5px;
    color: #c5c5c5;
  }
}
::v-deep .el-table th, .el-table tr {
    background-color: #f2f0ef;
  } 
::v-deep .el-table__row {
  border: 10px solid #eee;
}
::v-deep .el-pagination {
    position: fixed;
    bottom: 0;
    left: 50%;
    
    .btn-prev {
      border-radius: 5px 0 0 5px;
      border : 1px solid #999;
      background-color: rgb(224, 224, 224);
    }
    .btn-next {
       border-radius: 0 5px 5px 0;
      border : 1px solid #999;
      background-color: rgb(224, 224, 224);
    }
    li {
      border : 1px solid #999;
      background-color: rgb(224, 224, 224);
    }
    li:hover {
      color: #000;
    }
     li.active{
      color: #666;
      background-color: #fff;
    }
  }
  ::v-deep .el-dialog {
    border-radius: 10px;
    .dialog-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .tip{
      background-color: #f9e8b5;
      color: #000;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .btnGrop {
      text-align: center;
      .el-button {
        width: 100px;
      }
    }
  }

</style>